<template>
  <!--报到-允许报到-患者信息-->
  <div class="report-list-area" :class="optionsInfo.className">
    <template v-if="!!allowReport&&!!(allowReport.length)">
      <template v-if="typeInfo!=='tab'">
        <div class="report-all-wrap">
          <!--标记页-->
          <div class="header">
            <span class="left">
              <img src="@/components/assets/images/design/1-12.webp" alt="箭头"/>
            </span>
            <span class="middle">请选择您要报到的号别</span>
            <span class="right">
              <img src="@/components/assets/images/design/1-12.webp" alt="箭头"/>
            </span>
          </div>
          <!--一键报到按钮-->
          <div class="report-all" @click="handleReportAll" v-if="allowReportAll">一键报到</div>
        </div>

      </template>
      <template v-if="typeInfo==='tab'">
        <div class="report-all-tab-wrap" :class="{'report-all-hide-wrap':!allowReportAll}">
          <!--标记页-->
          <div class="header">
          <span class="left">
            <img src="@/components/assets/images/design/1-12.webp" alt="箭头"/>
          </span>
            <span class="middle">请选择您要报到的号别</span>
            <span class="right">
            <img src="@/components/assets/images/design/1-12.webp" alt="箭头"/>
          </span>
          </div>
          <!--一键报到按钮-->
          <div class="report-all" @click="handleReportAll" v-if="allowReportAll">一键报到</div>
        </div>
      </template>
    </template>
    <div class="report-number" :class="{'report-number2': !allowReportAll}">
      <template v-if="allowReport?.length">
        <template v-if="allowReport?.length && adoptList !== 'extendParams'">
          <div v-for="(item,index) in allowReport" class="item flex-box" :key="`${(item.registerId)}_${index}`">
            <div class="left flex-box-left">
              <div class="report-type">
                <img :src="reportType(item.signType)" alt="就诊类型">
              </div>
              <div class="dept-doctor">
                <div class="dept" v-if="!!(item.qcRegister)">{{ (item.qcRegister.deptName) || '\u00a0' }}</div>
                <div class="doctor" v-if="!!(item.qcRegister)">
              <span v-if="!!(item.qcRegister.workerName)&&false">
                {{ (item.qcRegister.workerName) || '\u00a0' }}
              </span>
                  <span class="sign">
                <ScrollX>
                  {{ (item?.qcRegister?.registerObjSimpleName) || (item?.qcRegister?.registerObjName) || '\u00a0' }}
                </ScrollX>
              </span>
                </div>
              </div>
            </div>
            <div class="right flex-box-right" v-if="isShowButton(item.signType)">
              <el-button type="primary" round class="button" @click="(e)=>handleReport(item)">报到</el-button>
            </div>
          </div>
        </template>
        <template v-if="allowReport?.length && adoptList === 'extendParams'">
          <template v-for="(item,index) in allowReport">
            <template v-if="item?.extendParams">
              <div class="item flex-box" :key="`${(item.registerId)}_${index}`">
                <div class="left flex-box-left">
                  <div class="dept-doctor">
                    <div class="patName">
                      {{ (item.extendParams?.patName) || '\u00a0' }}
                    </div>
                    <div class="doctor" v-if="!!(item.qcRegister)">
                    <span :class="item?.extendParams?.doctorTitle?'sign':'signStatic'">
                        <ScrollX>
                          {{ (item?.extendParams?.doctorTitle) || '\u00a0' }}
                        </ScrollX>
                    </span>
                    </div>
                  </div>
                </div>
                <div class="right flex-box-right"
                     v-if="isShowButton(item.signType)">
                  <el-button
                      round
                      type="primary"
                      class="button"
                      @click="(e)=>handleReport(item)">
                    报到
                  </el-button>
                </div>
              </div>
            </template>
          </template>

        </template>
      </template>
      <template v-else>
        <template v-if="(field?.type) === 'scene-report-keyboard2-info'">
          <el-empty class="empty-info" description="暂无数据" :image-size="340"/>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'
import {v4 as uuid} from "uuid";

export default {
  name: "ReportAllow",

  componentName: "ReportAllow",

  components: {
    ScrollX
  },

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    typeInfo: {
      type: String,
      default: 'list'
    },
    adoptList: { // 应对定制-取allowReport中的参数
      type: String,
      default: ''
    }
  },

  data() {
    return {
      widgetKey: uuid(),
      optionsInfo: Object(),
      consultationType1: require("@a/images/design/1-2×2.png"),
      consultationType2: require("@a/images/design/1-3×2.png"),
      consultationType3: require("@a/images/design/1-8×2.png"),
      consultationType4: require("@a/images/design/1-9×2.png"),
      consultationType5: require("@a/images/design/1-10×2.png"),
      consultationType6: require("@a/images/design/1-11×2.png"),
    }
  },

  computed: {
    // 报到的全量信息
    reportAllInfo() {
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      if (devType) {
        return reportPatientInfo.apiData;
      } else {
        return reportPatientInfo.mockData;
      }
    },

    //允许报到列表
    allowReport() {
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      if (devType) {
        return reportPatientInfo.apiData.unSignList;
      } else {
        return reportPatientInfo.mockData.unSignList;
      }
    },

    //允许报到所有显示
    allowReportAll() {
      let allowReport = (this.allowReport);
      let {handReportAll = true} = this.optionsInfo;
      let len = !!allowReport && !!(allowReport?.length) && (allowReport.length) >= 2
      return handReportAll && len
    },

    // 完成报到列表
    finishReport() {
      let devType = (this.devType);
      let reportPatientInfo = this.$store.getters['getReportPatientInfo'];
      if (devType) {
        let finishReportList = (reportPatientInfo.apiData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      } else {
        let finishReportList = (reportPatientInfo.mockData.signList)
        if (finishReportList && !!(finishReportList.length)) {
          return finishReportList;
        } else {
          return []
        }
      }
    },

    // 报到类型--加载的图片
    reportType() {
      return function (val) {
        switch (val) {
          case '0':
            // 初诊
            return `${this.consultationType1}`
          case '1':
            // 复诊
            return `${this.consultationType2}`
          case '2':
            // 过号
            return `${this.consultationType5}`
          case '7':
            // 锁定
            return `${this.consultationType4}`
          case '8':
            // 废号
            return `${this.consultationType3}`
        }
      }
    },

    // 是否有报到按钮
    isShowButton() {
      return function (val) {
        let arr = ['0', '1', '2'];
        return arr.includes(val)
      }
    },
  },

  mounted() {},

  methods: {
    // 允许报到--单独报到--报到按钮
    handleReport(row) {
      console.log('报到');
      console.log(row)
      this.$emit('handleReport', row);
    },


    // 一键报到
    handleReportAll() {
      let reportAllInfo = (this.reportAllInfo);
      this.$emit('handleReportAll', reportAllInfo);
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

};
</script>

<style lang="scss" scoped>
.report-list-area {
  height: 100%;
  overflow: hidden;

  .report-all-wrap {
    .header {
      text-align: center;
      font-weight: 500;
      font-size: 60px;
      color: #333333;
      padding: 42px 0;
      box-sizing: border-box;

      .left {
        display: inline-block;
        width: 66px;
        height: 66px;
      }

      .middle {
        padding: 0 50px;
      }

      .right {
        display: inline-block;
        width: 66px;
        height: 66px;
      }
    }

    .report-all {
      display: flex;
      width: calc(100% - 120px);
      margin: -4px auto 40px auto;
      align-self: center;
      text-align: center;
      justify-content: center;
      height: 110px;
      border-radius: 20px;
      line-height: 110px;
      font-size: 50px;
      box-sizing: border-box;
      background: #0059B3;;
      color: white;
      box-shadow: 0 9px 0 rgba(0, 89, 179, 0.5), 0 9px 25px rgba(0, 89, 179, 0.06);
    }
  }

  //显示一键报道
  .report-all-tab-wrap {
    display: flex;
    flex-direction: row;
    padding: 44px 40px 22px 40px;
    box-sizing: border-box;

    .header {
      text-align: center;
      font-weight: 500;
      font-size: 54px;
      color: #333333;
      box-sizing: border-box;
      width: calc(100% - 440px);
      height: 100%;
      align-self: center;
      align-items: center;
      align-content: center;
      justify-content: center;

      .left {
        display: inline-block;
        width: 66px;
        height: 66px;
      }

      .middle {
        padding: 0 12px;
      }

      .right {
        display: inline-block;
        width: 66px;
        height: 66px;
      }
    }

    .report-all {
      display: flex;
      width: 440px;
      margin: -4px auto 22px auto;
      align-self: center;
      text-align: center;
      justify-content: center;
      height: 100%;
      border-radius: 20px;
      line-height: 2;
      font-size: 50px;
      box-sizing: border-box;
      background: #0059B3;;
      color: white;
      box-shadow: 0 9px 0 rgba(0, 89, 179, 0.5), 0 9px 25px rgba(0, 89, 179, 0.06);
    }
  }

  //隐藏一键报道
  .report-all-hide-wrap {
    justify-content: center;
  }

  .report-number {
    padding: 0 30px 0 30px;
    box-sizing: border-box;
    height: calc(100% - 294px);
    overflow: auto;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      position: relative;
      z-index: 99999999999;
    }

    .item {
      background: white;
      border-radius: 30px;
      margin-bottom: 30px;
      padding: 30px;
      height: auto;
      min-height: auto;
      box-sizing: border-box;
      border: none;

      .left {
        border: none;
        min-width: calc(100% - 250px);
        flex-basis: calc(100% - 250px);

        .report-type {
          height: 150px;
          width: 150px;
          border-radius: 100px;
          overflow: hidden;
          line-height: 150px;
          text-align: center;
          align-items: center;
          align-self: center;
          flex-shrink: 0 !important;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .dept-doctor {
          display: flex;
          font-size: 50px;
          min-width: calc(100% - 150px);
          margin-left: 36px;
          flex-direction: column;
          flex-shrink: 0 !important;

          .dept {
            font-size: 52px;
            color: #333333;
            line-height: 70px;
            text-align: left;
            margin-bottom: 12px;
          }

          .patName {
            font-size: 64px;
            color: #333333;
            line-height: 70px;
            text-align: left;
            margin-bottom: 12px;
          }

          .doctor {
            font-size: 46px;
            color: #333333;
            line-height: 66px;
            text-align: left;
            width: 100%;

            .sign {
              color: white;
              font-size: 64px;
              background: #0059B3;
              padding: 8px 24px;
              border-radius: 10px;
              margin-top: 10px;
              max-width: calc(440px);
              min-width: calc(280px);
              line-height: inherit;
              display: inline-block;
            }

            .signStatic {
              color: white;
              font-size: 64px;
              padding: 8px 24px;
              border-radius: 10px;
              margin-top: 10px;
              max-width: calc(440px);
              min-width: calc(280px);
              line-height: inherit;
              display: inline-block;
            }
          }
        }
      }

      .right {
        flex-basis: calc(250px);
        font-weight: 500;
        width: 250px;
        height: auto !important;
        min-height: auto !important;
        border: none;
        flex-shrink: 0;

        .el-button {
          display: flex;
          width: 100%;
          align-self: center;
          text-align: center;
          justify-content: center;
          height: 96px;
          border-radius: 100px;
          line-height: 75px;
          font-size: 50px;
          background: #0059B3;;
          box-shadow: 0 9px 0 rgba(0, 89, 179, 0.5), 0 9px 25px rgba(0, 89, 179, 0.06);
        }
      }
    }

    :deep(.empty-info) {
      .el-empty__description p {
        font-size: 64px !important;
      }
    }
  }

  .report-number2 {
    height: calc(100% - 144px);
  }
}

.guide-keyboard-1280 {
  .report-number {
    height: calc(100% - 194px);
  }
}
</style>
